<template>
    <div id="allmap"></div>
</template>

<script>
export default {
    data() {
        return {
            map: null
        }
    },
    props:{
        id: {
            type: String,
            default: 'allmap'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '500px'
        },
        centerPoint : {
            type: Array,
            default: function () {
                return [116.404 ,39.915];
            }
        },
        zoom: {
            type: Number,
            default: 11
        },
        mapType: {
            type: Boolean,
            default: true
        },
        enableScroll: {
            type: Boolean,
            default: true
        },
        minZoom: {
            type: Number,
            default: 1
        },
        maxZoom: {
            type: Number,
            default: 19
        }
    },
    mounted() {
        // 百度地图API功能
        this.init();
    },
    methods: {
        init(){
            try{
                this.changeID();
                this.setDiv();
                this.map = new BMap.Map(this.id, {minZoom: this.minZoom, maxZoom: this.maxZoom});    // 创建Map实例
                //this.setCenterAndZoom();
                this.map.centerAndZoom(new BMap.Point(this.centerPoint[0], this.centerPoint[1]), this.zoom);
                if(this.mapType){ 
                    this.map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
                }
                this.map.enableScrollWheelZoom(this.enableScroll); 
            }catch(error){
                console.log(error);
                let _this = this;
                setTimeout(() => {
                    _this.init();
                    console.log("重新加载")
                }, 500);
            }
        },
        //更换地图容器id
        changeID(){
            if(this.id != "allmap"){
                 this.$el.id = this.id;
            }
        },
        //设置容器大小
        setDiv(){
            this.$el.style.width = this.width;
            this.$el.style.height = this.height;
        }
    }
}
</script>